<template>
  <div class="show_title">
    <div v-for="item in titleList" :key="item.id">
      <a href="javascript:;" :class="item.choose ? 'chosen' : ''"
        @click="showChange(item.id)">{{ item.title }}</a>
    </div>

  </div>
  <div class="scroll">
    <div class="bar"></div>
  </div>
  <div class="showBox">
    <ShowItem id="showItem" v-for="item in itemList" :key="item.id" :img="item.img"
      :title="item.title" :location="item.location" :price="item.price" :detail="item.detail" />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import ShowItem from '@/components/firstBody/showItem.vue'
import animate from '@/utils/animate.js'
export default defineComponent({
  components: {
    ShowItem
  },
  setup () {
    const titleList = ref([
      {
        id: 1,
        title: '刚需楼盘',
        choose: true
      },
      {
        id: 2,
        title: '品牌楼盘',
        choose: false
      },
      {
        id: 3,
        title: '热销推荐',
        choose: false
      }
    ])
    const showChange = (id) => {
      const bar = document.querySelector('.bar')
      const target = (id - 1) * 393
      animate(bar, target)
      titleList.value.forEach(item => {
        if (item.id === id) {
          item.choose = true
        } else {
          item.choose = false
        }
      })
    }
    // 接口获取到的item数据
    const itemList = ref([
      {
        id: 1,
        img: '',
        title: '金泽豪庭',
        location: '增城·白江',
        price: 16500,
        detail: '三房两厅·90.2平米'
      },
      {
        id: 2,
        img: '',
        title: '金泽豪庭',
        location: '增城·白江',
        price: 16500,
        detail: '三房两厅·90.2平米'
      },
      {
        id: 3,
        img: '',
        title: '金泽豪庭',
        location: '增城·白江',
        price: 16500,
        detail: '三房两厅·90.2平米'
      },
      {
        id: 4,
        img: '',
        title: '金泽豪庭',
        location: '增城·白江',
        price: 16500,
        detail: '三房两厅·90.2平米'
      },
      {
        id: 5,
        img: '',
        title: '金泽豪庭',
        location: '增城·白江',
        price: 16500,
        detail: '三房两厅·90.2平米'
      },
      {
        id: 6,
        img: '',
        title: '金泽豪庭',
        location: '增城·白江',
        price: 16500,
        detail: '三房两厅·90.2平米'
      },
      {
        id: 7,
        img: '',
        title: '金泽豪庭',
        location: '增城·白江',
        price: 16500,
        detail: '三房两厅·90.2平米'
      },
      {
        id: 8,
        img: '',
        title: '金泽豪庭',
        location: '增城·白江',
        price: 16500,
        detail: '三房两厅·90.2平米'
      }
    ])

    return {
      titleList,
      showChange,
      itemList
    }
  }
})
</script>

<style lang='less' scoped>
.show_title {
  display: flex;
  width: 1180px;
  height: 70px;
  background: rgba(147, 153, 165, 0.2);
  div {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    flex: 3;
    a {
      display: flex;
      height: 100%;
      width: 100%;
      justify-content: center;
      padding-top: 21px;
      box-sizing: border-box;
      font-family: 'HarmonyOS Sans SC';
      font-style: normal;
      font-weight: 400;
      font-size: 24px;
      color: #333333;
    }
    .chosen {
      color: #3072f6;
      // border-bottom: 2px solid #3072f6;
    }
  }
}
.scroll {
  position: relative;
  display: flex;
  background-color: rgba(147, 153, 165, 0.2);
  width: 100%;
  height: 2px;
  .bar {
    position: absolute;
    height: 2px;
    width: 393.33px;
    background-color: #3072f6;
  }
}
.showBox {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 540px;
  margin-top: 16px;
}
#showItem:nth-child(4n) {
  margin-right: 0;
}
</style>
